
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>WebSocket Logger</title>
    <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <script th:src="@{/mobile/js/jquery.min.js}"></script>
    <script th:src="@{/mobile/layui/layui.js}"></script>
</head>
<body>

<div id="content" >
    <input id="userName" type="text" value="xw">
    <h3 align="center" style="color: #007DDB;margin-top: 20px;margin-bottom: 20px">这里将显示操作信息</h3>



    <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="test5" placeholder="yyyy-MM-dd HH:mm:ss">
        </div>
    </div>

    <script>
        layui.use('laydate', function(){
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#test5' //指定元素
            });
        });
    </script>

</div>
</body>
<script>

    var socket;
    if(typeof(WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    }else
        console.log("您的浏览器支持WebSocket");{
        //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
        socket = new WebSocket("ws://localhost:80/sharepark/websocket/"+$("#userName").val());
       /* socket = new WebSocket("${basePath}websocket/${cid}".replace("http","ws"));*/
        //打开事件
     /*   socket.onopen = function() {
            console.log("Socket 已打开");
            socket.send("这是来自客户端的消息" + location.href + new Date());
        };*/
        //获得消息事件
        socket.onmessage = function(msg) {
            alert(msg.data);
            var content = $("#content").html();
            $("#content").html(content+'<div style="text-align: right;margin-bottom: 8px">\n' +
                '                        <p><q style="color: mediumorchid">服务端:</q><span>'+msg.data+ '</span></p>\n' +
                '                    </div>\n' +
                '                    <br/>');

        };
        //发现消息进入 调后台获取



        //关闭事件
        socket.onclose = function() {
            console.log("Socket已关闭");
        };
        //发生了错误事件
        socket.onerror = function() {
            alert("Socket发生了错误");
            //此时可以尝试刷新页面
        }
        //离开页面时，关闭socket
        //jquery1.8中已经被废弃，3.0中已经移除
        // $(window).unload(function(){
        //     socket.close();
        //});
    }
</script>

</body>
</html>